<template>
    <div>
        <!--搜索框-->
        <div>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">楼栋名称</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入楼栋名称"
                    v-model="queryForm.searched">
            </el-input>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">楼栋编码</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入楼栋编号"
                    v-model="queryForm.buildingCode">
            </el-input>
            <el-button type="primary" class="el-icon-search" size="mini" @click="searchBuilding()">搜索</el-button>
            <el-button type="info" class="el-icon-refresh" size="mini" @click="cleanSearch()" plain>重置</el-button>
        </div>
        <!--小区选择-->

        <!--增删改导出-->
        <div>
            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="primary" class="el-icon-plus" size="mini" plain @click="loadShow">新增</el-button>
            </el-row>
            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="success" class="el-icon-edit" size="mini" disabled>修改</el-button>
            </el-row>
            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="danger" class="el-icon-delete" size="mini" :disabled="multiple" @click="deleteAll">删除</el-button>
            </el-row>
            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="warning" class="el-icon-download" size="mini" plain @click="excelUpload">导出</el-button>
            </el-row>
        </div>
        <!--添加或者修改-->
        <div>
            <el-dialog title="楼栋信息" :visible.sync="dialogFormVisible">
                <el-form :model="zyBuilding" size="small" label-width="100px">
                    <el-form-item label="楼栋名称">
                        <el-input v-model="zyBuilding.buildingName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="楼栋面积">
                        <el-input v-model="zyBuilding.buildingAcreage" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="小区名称">
                        <el-select v-model="zyBuilding.communityId" placeholder="请选择">
                            <el-option
                                    v-for="item in communitys"
                                    :key="item.communityId"
                                    :label="item.communityName"
                                    :value="item.communityId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="zyBuilding.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="bt">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--列表表格-->
        <el-table
                :data="zyBuildings"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    label="楼栋id"
                    width="120"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼栋名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼栋编码"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingCode }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼栋面积"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.buildingAcreage }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="小区名称"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.community.communityName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    :show-overflow-tooltip="true"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="180"
                             align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleUpdate(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
<!--    分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="current"
                :page-sizes="[1, 2, 3]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="right">
        </el-pagination>

    </div>

</template>

<script>
    let temp = false
    export default {
        name: "Building",
        data (){
            return {
                //当前页数
                current: 1,
                //总条数
                total: 0,
                //每页显示多少条（默认10条）
                size: 3,
                //楼栋集合
                zyBuildings:[],
                //楼栋对象
                zyBuilding:{
                    buildingId:"",
                    buildingName:"",
                    buildingCode:"",
                    buildingAcreage:"",
                    remark:"",
                    createTime:"",
                    communityId:""
                },
                //弹窗框的显示与隐藏
                dialogFormVisible:false,
                //搜素输入的楼栋名称
                queryForm:{
                    searched:"",
                    buildingCode:""
                },
                //小区信息
                communitys:[],
                //单个禁用
                single: true,
                //非多个禁用
                multiple: true,
                //多删数组
                ids: [],

            }
        },
        methods: {
            //列表显示
            loadBuilding(current,size){
                this.zyBuilding.buildingName = this.queryForm.searched;
                this.zyBuilding.buildingCode = this.queryForm.buildingCode;
                this.axios.post("http://localhost:8080/building/page?current="+current+"&size="+size,this.zyBuilding)
                    .then(res => {
                        this.zyBuildings = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                        this.size = res.data.data.size;
                })
            },
            //页里面的条数发生改变时触发事件
            handleSizeChange(val){
                this.size = val;
                this.loadBuilding(this.current,this.size)
            },
            //页码发生改变的时候触发事件
            handleCurrentChange(val){
              this.current = val;
                this.loadBuilding(this.current,this.size)
            },
            //搜索事件
            searchBuilding(){
                this.current=1;
                this.loadBuilding(this.current,this.size);
            },
            //重置事件
            cleanSearch(){
                this.queryForm={
                    searched:"",
                    buildingCode:""
                },
                    this.current=1;
                    this.loadBuilding(this.current,this.size);
            },
            //点击新增事件
            loadShow(){
                this.zyBuilding={
                    buildingId:"",
                    buildingName:"",
                    buildingCode:"",
                    buildingAcreage:"",
                    remark:"",
                    createTime:"",
                    communityId:""
                },
                    this.dialogFormVisible = true;
            },
            //点击确定判断是添加还是修改
            bt (){
                if(temp == false){
                    //添加
                    this.axios.post("http://localhost:8080/building",this.zyBuilding)
                        .then(res => {
                            console.log(res);
                            if(res.data.data=="添加成功"){
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.loadBuilding(this.current,this.size);
                            }
                        })
                }else{
                    //修改
                    this.axios.put("http://localhost:8080/building",this.zyBuilding)
                        .then(res =>{
                            if(res.data.data=="修改成功"){
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.loadBuilding(this.current,this.size);
                            }
                        })
                }
                    temp = false;
                    this.dialogFormVisible = false
            },
            //查询所有的小区名称
            selectAll(){
                this.axios.get("http://localhost:8080/community")
                    .then(res =>{
                        this.communitys = res.data.data
                    })
            },
            //修改回显
            handleUpdate(index,row){
                console.log(row);
                this.zyBuilding = JSON.parse(JSON.stringify(row))
                this.zyBuilding.communityId = row.community.communityId
                temp = true;
                this.dialogFormVisible = true;
            },
            //单条数据删除
            handleDelete(index,row){
                if(confirm("是否删除？")){
                    this.axios.delete("http://localhost:8080/building/"+row.buildingId)
                        .then(res =>{
                            if(res.data.data=="删除成功"){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.current=1;
                                this.cleanSearch();
                                this.loadBuilding(this.current,this.size);
                            }
                        })
                }
            },
            //多删选中按钮
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.buildingId);
                this.single = selection.length !== 1;
                this.multiple = !selection.length
            },
            //多删
            deleteAll(row) {
                const buildingIds = row.buildingId || this.ids;
                console.log(buildingIds);
                if (confirm("是否删除多个?")) {
                    this.axios.post("http://localhost:8080/building/ids", buildingIds)
                        .then(res => {
                            if (res.data.data == "删除成功") {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.current=1;
                                this.cleanSearch();
                                this.loadBuilding(this.current,this.size);
                            }
                        })
                }
            },
            //导出数据
            excelUpload(){
                this.axios({
                    method:"post",
                    url:"http://localhost:8080/building/export",
                    data:this.zyBuildings,
                    responseType:"blob"
                }).then(res =>{
                    if (res && res.data) {
                        // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                        this.jsFileDownload(res.data, decodeURIComponent("楼栋数据.xlsx"))
                    }
                })
            }
        },
        created() {
            this.loadBuilding(this.current,this.size);
            this.selectAll()
        }
    }
</script>

<style scoped>

</style>